<!--入库-->
<template>
    <el-card shadow="never" class="aui-card--fill">
        <el-form :inline="true" :model="formInline">
            <el-form-item label="存货编号">
                <el-input v-model="formInline.code" placeholder="存货编号" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="存货名称">
                <el-input placeholder="存货名称" v-model="formInline.name" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="入库日期">
                <el-date-picker
                        v-model="formInline.inDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd"
                        :picker-options="pickerOptions"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="warning" size="small" @click="addDialog">新增</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" size="small" @click="batchDelete">批量删除</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="info" size="small" @click="exportHandle()">导出</el-button>
            </el-form-item>
        </el-form>
        <reusable-table :table-data="tableData" @manyChange="manyChange" :indexValue="10">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column type="index" label="序号" align="center" :index="indexMethod"></el-table-column>
            <el-table-column prop="inDate" label="入库日期" align="center" width="100"></el-table-column>
            <el-table-column prop="code" label="存货编码" align="center" width="120"></el-table-column>
            <el-table-column prop="dictCategory" label="类别" align="center" width="180">
            </el-table-column>
            <el-table-column prop="name" label="存货名称" align="center" width="250">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top-start">
                        <div class="cell-content">{{ scope.row.name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="model" label="规格型号" align="center"></el-table-column>
            <el-table-column prop="unit" label="计量单位" align="center"></el-table-column>
            <el-table-column prop="quantity" label="数量" align="center"></el-table-column>
            <el-table-column prop="unitFee" label="单价" align="center"></el-table-column>
            <el-table-column prop="totalFee" label="金额" align="center"></el-table-column>
            <el-table-column prop="factory" label="生产厂家" align="center" width="250">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.factory" placement="top-start">
                        <div class="cell-content">{{ scope.row.factory }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top-start">
                        <div class="cell-content">{{ scope.row.remark }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" align="center" width="150"></el-table-column>
            <el-table-column prop="updateDate" label="更新时间" align="center" width="150"></el-table-column>
            <el-table-column label="操作" align="center" width="100" fixed="right">
                <template slot-scope="scope">
                    <!--                    <el-button size="mini" type="primary" @click="editHandle(scope.row)">修改-->
                    <!--                    </el-button>-->
                    <el-button size="mini" type="danger" @click="deleteData(scope.row.id)">删除
                    </el-button>
                </template>
            </el-table-column>
        </reusable-table>
        <Pagination @sizeChange="sizeChange" @currentChange="currentChange" :total="total" :currentPage="currentPage"/>
        <warehousingDialog ref="child" @updateViews="updateViews"/>
    </el-card>
</template>

<script>
import Pagination from '../../../components/pagination.vue'
import warehousingDialog from './warehousing-dialog'
import mixinViewModule from '@/mixins/view-module'
import ReusableTable from '../../../components/ReusableTable.vue'

export default {
    mixins: [mixinViewModule],
    components: {
        warehousingDialog,
        Pagination,
        ReusableTable // 注册可复用的表格组件
    },
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: '/stock/stockin/page',
                getDataListIsPage: true,
                exportURL: '/stock/stockin/export',
            },
            tableData: [],
            loadAll: [
                {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
                {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
                {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"},
                {"value": "泷千家(天山西路店)", "address": "天山西路438号"},
                {"value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},
                {"value": "贡茶", "address": "上海市长宁区金钟路633号"},
                {"value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号"},
            ],
            currentPage: 1,//默认显示第一页
            pageSize: 10,//默认每页显示5条数据
            total: 0,//总条数
            manyArr: [],
            formInline: {
                code: '',
                name: '',
                inDate: [],
            },
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                }
            },
        }
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        querySearchAsync(queryString, cb) {
            var loadAll = this.loadAll;
            var results = queryString ? loadAll.filter(this.createStateFilter(queryString)) : loadAll;
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        // 序号
        indexMethod(index) {
            return index + 1;
        },
        // 列表的数据接口---------
        getDataList(code, name, inDate) {
            this.$http.get(`/stock/stockin/page`, {
                params: {
                    page: this.currentPage,
                    limit: this.pageSize,
                    code: code,
                    name: name,
                    startDate: inDate == null ? '' : inDate[0],
                    endDate: inDate == null ? '' : inDate[1],
                }
            }).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.tableData = res.data.list
                this.total = res.data.total
            }).catch(() => {
            });
        },
        // 每页条数
        sizeChange(val) {
            this.pageSize = val;
            this.getDataList()
        },
        // 当前页
        currentChange(val) {
            this.currentPage = val
            this.getDataList()
        },
        // 新增
        addDialog() {
            this.$refs.child.dialogVisible = true;
            delete this.$refs.child.dataForm.id
            // this.$refs.child.dataForm = {}
        },
        // 新增修改-子传父-刷新
        updateViews() {
            this.getDataList()
        },
        // 编辑
        editHandle(row) {
            this.$refs.child.dialogVisible = true;
            this.$refs.child.dataForm = row
        },
        // 多选需要删除的数据
        manyChange(val) {
            this.manyArr = val.map(it => it.id)
        },
        // 批量删除按钮
        batchDelete() {
            this.deleteData()
        },
        // 删除接口----------------
        deleteData(id) {
            if (this.manyArr.length > 0 || id) {
                this.$confirm(`确定要删除数据吗？`, "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    }
                ).then(() => {
                    this.$http.delete(`/stock/stockin`, {data: id ? [id] : this.manyArr}).then(({data: res}) => {
                        if (res.code != 0) {
                            return this.$message.error(res.msg)
                        }
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                        this.getDataList();
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
            } else {
                this.$message({
                    type: "info",
                    message: "请先进行选择!"
                });
            }
        },
        onSubmit() {
            if (this.formInline.inDate == null) {
                this.getDataList(this.formInline.code, this.formInline.name, null);
            } else {
                this.getDataList(this.formInline.code, this.formInline.name, this.formInline.inDate);
            }
        }
    }
}
</script>

<style scoped>
.cell-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item {
    min-width: 0;
}
</style>